<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>媒体查询</title>
  /*媒体查询引入方式 3*/
  <link rel="stylesheet" href="" media="(min-devic-width 200px;) and (max-device-width: 300px)">
</head>
/*媒体查询引入方式 1*/
<style media="(min-devic-width 200px;) and (max-device-width: 300px)">
  .box1 {
    width: 100px;
    height: 200px;
  }

  /*媒体查询引入方式 2*/
  /*不同的宽度匹配 不同的样式*/
  @media screen and (min-device-width:200px) and (max-device-width:300px) {
    .box1 {
      background-color: blue;
    }
  }

  @media screen and (min-width:500px) and(max-width:900px) {
    .box1 {
      background-color: pink;
    }
  }
</style>

<body>
  <div class="box1"></div>
</body>

</html>